<template>
	<div class="shopping-cart-situation ">
		<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
	     	<div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title am-fl">学生端购物车情况</div>
                </div>
	        	<div class="widget-body am-fr">
					<div class="am-u-md-12 am-form">
						<el-select size="small" @change="handleChangeArea" class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group" v-model="query.areaTeamId" placeholder="请选择区域">
	                        <el-option
	                            v-for="item in areaTeams"
	                            :key="item.areaTeamId"
	                            :label="item.name"
	                            :value="item.areaTeamId">
	                        </el-option>
	                    </el-select>
	                    <el-select size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group" multiple
					               :disabled="busTeams.length === 0" v-model="query.busTeamIds" placeholder="请选择业务组">
					    	<el-option
						        v-for="item in busTeams"
						        :key="item.busTeamId"
						        :label="item.name"
						        :value="item.busTeamId">
					    	</el-option>
					    </el-select>
                        <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group ">
                            <el-date-picker
                                @change="handleChangeYear"
                                v-model="year"
                                type="year"
                                :clearable="false"
                                :editable="false"
                                placeholder="请选择年份">
                            </el-date-picker>
                        </div>
						<el-select :disabled="periods.length === 0" size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group" multiple
	                        v-model="query.periodIds" placeholder="请选择期数">
	                        <el-option
	                            v-for="item in periods"
	                            :key="item.periodId"
	                            :label="item.periodName"
	                            :value="item.periodId">
	                        </el-option>
	                    </el-select>
						<div class="am-u-sm-12 am-u-md-12 am-u-lg-3 ">
                            <div class="am-form-group ">
                                <button @click="search" type="button" class="btn-search am-btn am-btn-default am-btn-success">
					        	<span class="am-icon-search"></span>查询
                                </button>
                                <button  type="button" class="btn-search am-btn am-btn-default am-btn-success" @click="handleExport">
                                    <span class="am-icon-download"  ></span>导出
                                </button>
                            </div>
					    	
					    </div>
			            <el-table
			              :data="tableData"
			              border
			              stripe
			              :empty-text="tableNoDataTips"
			              style="min-width: 100%">
                          <el-table-column
			                label="业务组"
			                prop="busTeamName"
                            align="center"
			                min-width="120">
			              </el-table-column>
			              <el-table-column
			                label="期数"
                            align="center"
			                prop="periodName"
			                min-width="120">
			              </el-table-column>
			             
			              
			              <el-table-column
			                align="center"
			                label="年级"
			                prop="gradeName"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="科目"
			                prop="subjectName"
			                min-width="100">
			              </el-table-column>
                          <el-table-column
			                label="班级名称"
			                prop="className"
			                min-width="100">
			              </el-table-column>
			             
			              <el-table-column
			                align="center"
			                label="绑定学员"
			                prop="studentNames"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="登录账号"
			                prop="customerPhoneNo"
			                min-width="100">
			              </el-table-column>
			            </el-table>
			        </div>
			        <div class="am-u-lg-12 am-cf">
			            <div class="am-fr">
			            	<pagination isShowPageSize v-bind:total="total" v-bind:pageNo="query.pageNo" v-bind:pageSize="query.pageSize" @paging="handleSearch" @pageSizeChange="pageSizeChange" />
			            </div>
			        </div>
	        	</div>
	        </div>
	    </div>
		
	</div>
</template>
<script>
	import io from '../../lib/io'
	import moment from 'moment'
	import Pagination from '../base/Pagination'
	export default{
		data(){
			return {
				tableNoDataTips: '暂无数据',
				tableData: [],
				total: 0,
				query:{
					areaTeamId : window.config.areaTeams[0] && window.config.areaTeams[0].areaTeamId || '' ,
					busTeamIds: [],
					periodIds: [],
					pageNo: 1,
					pageSize: 10
				},
                periods: [],
                year: moment().format('YYYY'),
				
			}
		},
		watch: {
            year:function(val){

            }
		},
		 mounted: function () {
			$(window).smoothScroll()
		},
		components: {
	    	Pagination
	    },
		methods:{
            handleChangeYear(){
                this.loadPeriodByYear()
            },
			handleChangeArea(){
                this.loadPeriodByYear()
			},
	      	search(){
	      		
	      		this.handleSearch(1);
	      	},
	      	handleSearch(pageNo){
                this.query.pageNo = pageNo
                this.loadTableData()
			},
			pageSizeChange(pageSize){
				this.query.pageSize = pageSize
			},
	      	loadPeriodByYear(resolve,change) {
                io.post(io.periodByYearAndAreaTeamId,{
                    areaTeamId: this.query.areaTeamId,
                    year: this.year ? moment(this.year).format('YYYY'): '',
                },(ret) => {
                    if(ret.success){
                        this.periods = ret.data;
                        // if (this.periods.length === 0) {
                        //     this.$alert('当前没有设置期数');
                        //     if(change || (!change && !this.cache1)){
                        //         this.query.periodIds = [];
                        //     }

                        // }else{
                        //     if(change || (!change && !this.cache1)){
                        //         let isCurrent = ret.data.filter(item => item.isCurrent == 1 )[0];
                        //         if(isCurrent != undefined){
                        //             this.formData.periodIds = [ret.data.filter(item => item.isCurrent == 1 )[0].periodId];
                        //         }else {
                        //             this.formData.periodIds = ret.data[0].periodId ;
                        //         }
                        //     }
                        // }
                    }else{
                        this.$alert(ret.desc)
                    }

                    if(resolve){
                        resolve('success');
                    }
                })
            },
            loadTableData(){

                let param = {
                    areaTeamId:this.query.areaTeamId,
                    periodIds:this.query.periodIds.join(','),
                    busTeamIds:this.query.busTeamIds.join(','),
                    pageNo:this.query.pageNo,
                    pageSize:this.query.pageSize,
                }
                if(this.query.periodIds.length===0){
                   param.periodIds = this.periods.map(item=>{return item.periodId}).join(',')
                }
                io.post(io.shoppingCartSituation,param,(ret)=>{
                    if(ret.success){
                        this.total = ret.data.total
                        this.tableData = ret.data.list
                        console.log(ret)
                    }
                })
            },
            handleExport() {
                let param = {
                    areaTeamId:this.query.areaTeamId,
                    periodIds:this.query.periodIds.join(','),
                    busTeamIds:this.query.busTeamIds.join(','),
                }
                io.downloadFile(io.exportShoppingCartSituation,param, function (ret) {
                    if (ret.success) {
                    } else {
                        _this.$alert(ret.desc)
                    }
                })
            },
            
		},
		computed: {
			areaTeams() {
                return this.$root.config.areaTeams || []
            },
            busTeams() {
            	let busTeams = ( ( this.query.areaTeamId  ) ? ( this.$root.config.groupBusTeams[this.query.areaTeamId] || [] ) : [] )
            	// if(busTeams.length){
            	// 	this.query.busTeamId = [busTeams[0].busTeamId]
            	// }
		        return busTeams
		    },
		   
		},
		created(){
	    	let promise = new Promise((resolve, reject) => {
                this.loadPeriodByYear(resolve)
            });
	    	promise.then((value) => {

				 this.loadTableData()
			}, (error) => {

			});

	    },
	}
</script>
<style lang="less">

    .shopping-cart-situation .am-form input[type=text][readonly]{
        cursor: text;
        background-color: transparent;
    }
	

</style>
